Digital produktion och
informationsarkitektur

KOMC36: Projektledning i digitala miljöer HT24

nils.holmberg@isk.lu.se

Course literature

Morville, Rosenfeld, and Arango (2015)

Ebook downloaded from:
https://webflow.com/

Lectures and workshops


Lecture, nov 28

  • Information architecture
  • Web design, User interface


Workshop, dec 4 (zoom)

  • Mermaid (ChatGPT)
  • Webflow, Figma

Communication project

  • Strategy
  • Scope
  • Structure
  • Skeleton
  • Surface

 

Project cases

Research: Foundations of IA

Information architecture, Ch. 11

  • Framework: Context, content, and user-centered research.
  • Users: Define, recruit, and conduct sessions effectively.
  • Content analysis: Inventory, structure, and gaps.
  • Advocacy: Research ensures evidence-based decisions.

Crafting an IA Strategy

Information architecture, Ch. 12

  • Strategy: A roadmap aligning IA with goals.
  • Transition: Turning research insights into strategic actions.
  • Deliverables: Reports, plans, and presentations.
  • Challenges: Defending and adapting IA strategies.

What Problems Does Information Architecture Solve?

Information architecture, Ch. 1

  • Hello, iTunes: A case study of complexity and user experience.
  • Challenges: Poor navigation, findability, and usability.
  • Enter IA: Structuring and organizing for clarity and effectiveness.
  • Solutions: Aligning user needs with system structure.

Defining Information Architecture

Information architecture, Ch. 2

  • Definitions: IA organizes and structures content for usability.
  • Visibility: Good IA is often invisible but essential.
  • Best Practices: Balancing creativity with functionality.
  • Goals: Enhance user experience through thoughtful design.

Designing for Finding

Information architecture, Ch. 3

  • Simple Models Fail: Real needs demand nuanced approaches.
  • Information Needs: Anticipating what users seek.
  • User Behavior: Search, browse, and discovery patterns.
  • Research: Methods to understand users’ search strategies.

Designing for Understanding

Information architecture, Ch. 4

  • Sense of Place: Helping users navigate digital spaces confidently.
  • Real-World Inspiration: Learning from physical architecture.
  • Organizing Principles: Clarity through structure and hierarchy.
  • Modularity: Scalable and flexible systems for long-term usability.

Anatomy of Information Architecture

Information architecture, Ch. 5

  • Visualizing IA: Diagrams to map structure and relationships.
  • Top-Down vs. Bottom-Up: Strategic vs. user-driven IA.
  • Invisible IA: Systems users experience but don’t see.
  • Components: Content, context, and users as building blocks.

Building Organization Systems

Information architecture, Ch. 6

  • Challenges: Overcoming complexity and ambiguity.
  • Schemes: Topical, chronological, and audience-based methods.
  • Structures: Hierarchies, networks, and databases.
  • Social Classification: Crowdsourced tagging and folksonomies.

Crafting Labeling Systems

Information architecture, Ch. 7

  • Importance: Labels help users find and understand content.
  • Varieties: Textual, icon-based, and hybrid labels.
  • Functions: Labels as navigational headings and descriptors.
  • Design: Clear, concise, and consistent language.
  • How is this implemented in client organization?

Designing Navigation Systems

Information architecture, Ch. 8

  • Types: Global (embedded), local (supplemental), and contextual navigation.
  • Placemaking: Helping users orient themselves within the system.
  • Flexibility: Supporting diverse user needs and paths.
  • Advanced Approaches: Breadcrumbs, mega menus, and filters.
  • How is this implemented in client organization?

Designing Search Systems

Information architecture, Ch. 9

  • Necessity: Determining if search adds value to the experience.
  • Anatomy: Indexing, algorithms, and query builders.
  • Presenting Results: Sorting, filters, and relevance ranking.
  • Search Interface: Intuitive input fields and clear feedback.
  • How is this implemented in client organization?

Thesauri, Controlled Vocabularies, and Metadata

Information architecture, Ch. 10

  • Metadata: Structuring data for discoverability and context.
  • Controlled Vocabularies: Standardizing terminology.
  • Semantic Relationships: Hierarchies, synonyms, and cross-references.
  • Faceted Classification: Multi-dimensional sorting for user flexibility.
  • How is this implemented in client organization?

Design and Documentation

Information architecture, Ch. 13

  • Visual tools: Sitemaps, wireframes, and content maps.
  • Controlled vocabularies for consistent navigation.
  • Collaborative design: Unifying teams and processes.
  • Style: Comprehensive IA documentation and guidelines.

Break!

Digital production

  • Strategy
  • Scope
  • Structure
  • Skeleton
  • Surface

Strategy

Web design process

  • Aligns design with overarching web goals and user experience.
  • Defines purpose and key outcomes for the interface.
  • Bridges user needs and technical constraints.
  • Establishes a clear design direction for the project.
  • Guides consistency across the entire design process.

Strategy, User Needs

Web design process

  • Focuses on understanding and addressing user pain points.
  • Ensures the interface meets user expectations and enhances usability.
  • Prioritizes features and experiences that provide real value to users.
  • Maps user personas to tailor interactions to diverse needs.
  • Creates solutions that solve practical problems for the target audience.

Strategy, Site Objectives

Web design process

  • Identifies measurable outcomes for the site.
  • Aligns navigation and content with strategic priorities.
  • Focuses on user retention and goal completion.
  • Builds consistency in design to enhance usability.
  • Lays the foundation for feature prioritization.

Scope

Web design process

  • Defines project boundaries and deliverables.
  • Outlines core functionalities and content inclusions.
  • Maps client needs to actionable tasks.
  • Ensures design aligns with technical feasibility.
  • Prevents scope creep through structured planning.

Scope, Functional Specs

Web design process

  • Details required features like forms and interactivity.
  • Specifies integrations like APIs or third-party tools.
  • Outlines backend requirements for user actions.
  • Includes accessibility and performance benchmarks.
  • Provides a roadmap for development teams.

Scope, Content Requirements

Web design process

  • Defines text, images, and multimedia needs.
  • Ensures content aligns with branding and tone.
  • Establishes placeholders for missing assets.
  • Balances aesthetic design with functional clarity.
  • Sets priorities for critical versus optional content.

Structure

Web design process

  • Framework organizing content for usability and flow.
  • Prioritizes content-first design principles.
  • Balances simplicity with comprehensive coverage.
  • Provides visual consistency for user interactions.
  • Lays groundwork for navigation and information hierarchy.

Structure, Interaction Design

Web design process

  • Plans responsive buttons, forms, and navigation links.
  • Designs logical user flows for task completion.
  • Prioritizes accessibility and error prevention.
  • Enhances engagement with meaningful feedback loops.
  • Focuses on intuitive click and touch interactions.

Structure, Information Architecture

Web design process

  • Creates clear sitemaps for navigation planning.
  • Groups content logically to guide user journeys.
  • Balances user goals with business objectives.
  • Supports scalability for future site expansion.
  • Aligns with SEO best practices for discoverability.

Skeleton

Web design process

  • Translates structure into low-fidelity wireframes.
  • Lays out visual hierarchy and interactive zones.
  • Ensures functional clarity before visual design.
  • Identifies gaps or redundancies in content.
  • Serves as a blueprint for final design stages.

Skeleton, Interface Design

Web design process

  • Integrates consistent graphics, icons, and images.
  • Balances text blocks with visual elements.
  • Prioritizes forms and buttons for user interaction.
  • Creates alignment across reusable UI components.
  • Tests interface clarity with early user feedback.

Skeleton, Navigation Design

Web design process

  • Plans global menus for primary navigation.
  • Includes local menus for contextual navigation.
  • Structures breadcrumb trails to enhance orientation.
  • Optimizes for responsive design across devices.
  • Balances depth and breadth in navigation hierarchy.

Skeleton, Information Design

Web design process

  • Organizes data into readable, scannable formats.
  • Uses layout to highlight critical information.
  • Ensures consistency in presenting similar data.
  • Incorporates charts and tables where necessary.
  • Balances text with visual emphasis for clarity.

Surface

Web design process

  • Represents the final layer of design aesthetics.
  • Creates emotional connections through visual appeal.
  • Focuses on user perception and brand alignment.
  • Brings all design layers into a cohesive whole.
  • Adds polish for a professional, usable product.

Surface, Visual Design

Web design process

  • Defines font pairings for readability and style.
  • Establishes a harmonious color palette.
  • Balances visual hierarchy for user attention.
  • Ensures consistent iconography and button styling.
  • Aligns visuals with accessibility standards.

Final tesing and review

Web design process

  • Validates functionality across browsers and devices.
  • Tests interactions, forms, and user flows for usability.
  • Ensures alignment with business and user goals.
  • Fixes bugs and optimizes performance metrics.
  • Prepares the site for seamless deployment.

Product launch

Web design process

  • Executes the go-live strategy with a detailed plan.
  • Communicates launch with stakeholders and users.
  • Monitors performance metrics post-launch.
  • Addresses immediate user feedback and issues.
  • Celebrates and transitions to maintenance mode.

Mermaid

Digital production tools

  • Visualizes design processes with flowcharts.
  • Simplifies complex sitemaps and user flows.
  • Creates interactive diagrams for stakeholder buy-in.
  • Documents architecture changes for teams.
  • Integrates easily into collaborative tools.

Webflow, Figma

Digital production tools

  • Enables rapid prototyping with responsive designs.
  • Streamlines collaboration between designers and developers.
  • Balances visual creativity with technical functionality.
  • Tests user experiences with interactive components.
  • Bridges the gap from concept to deployment seamlessly.

Next steps

Workshop on zoom, dec 4

References

Morville, Peter, Louis B Rosenfeld, and Jorge Arango. 2015. Information Architecture for the Web and Beyond. O’Reilly.

https://canvas.education.lu.se/courses/28874